@import '@/lib/reset.scss';
.de_contain{
  @include rect(100%, auto);
  .contain_song{
    @include rect(100%, 460px);
    padding:80px;
    @include flexbox();
    background:linear-gradient(to bottom,rgb(228, 249, 230),#fff);
    .img_contain{
      @include rect(300px, 300px);
      float: left;
      margin-right:56px;
      img{
        @include rect(300px, 300px);
      }
    }
    .info_contain{
      h2{
        font-size: 30px;
        font-weight: 900;
      }
      h5{
        line-height: 50px;
        font-size: 15px;
        margin-bottom:30px;
        i{
          display: inline-block;
          @include rect(20px,20px);
          line-height: 20px;
          text-align: center;
          background:#ccc;
          color:#fff;
          border-radius: 50%;
          margin-right:16px;
        }
      }
      p{
        line-height: 30px;
        font-size: 14px;
      }

    }
    .more_contain{
      button{
        @include rect(120px,35px);
        border-radius: 18px;
        border:0;
        margin:10px 10px 0 0;
        background:transparent;
        border:1px solid #333;
        color:#333;
        i{
          font-size: 16px;
        }
        &:hover{
          background:#fff;
        }
        &:first-child{
          color:#fff;
          background:#e91e63;
          border:1px solid #e91e63;
          i{
            font-size: 20px;
            margin-right:3px;
          }
        }
      }
    }
  }
  // 标题
  h2{
    font-size: 24px;
    line-height: 50px;
  }
  .contain_lyric{
    @include rect(86%,auto);
    margin:10px auto;
    p{
      line-height: 30px;
      color:#333;
    }
    span{
      color:#e91e63;
    }
  }
  .contain_like{
    @include rect(90%, auto);
    margin:0 auto;
    // background: yellow;
    overflow: hidden;
    padding:20px 0;
    .item-box{
      @include rect(380px,100px);
      background:#ccc;
      float: left;
      margin-left:15px;
      margin-top:15px;
      dl{
        @include rect(100%,100%);
        position: relative;
        dt{
          float: left;
          @include rect(100px,100px);
          overflow: hidden;
          position: relative;
          img{
            @include rect(100px,100px);
          }
          b{
            display: block;
            @include rect(50px,50px);
            border-radius: 50%;
            background: #000;
            opacity: 0.8;
            position: absolute;
            top:25px;
            left:25px;
            color:#fff;
            font-size: 25px;
            line-height: 50px;
            text-align: center;
            display: none;
          }
        }
        dd{
          float: left;
          &:nth-of-type(1){
            @include rect(170px,100%);
            margin-left:20px;
            p{
              width:100%;
              line-height: 56px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          &:nth-of-type(2){
            position: absolute;
            right:20px;
            top:35px;
          }
          &:nth-of-type(3){
            position: absolute;
            // background:#f00;
            z-index: 10;
            right:0px;
            top:35px;
            width:130px;
            display: none;
            i{
              font-weight: 900;
              margin-left:20px;
              &:hover{
                color:#e91e63;
              }
            }
          }
        }
      }
      &:hover{
        img{
          transform: scale(1.1)
        }
        b{
          display: block;
        }
        dd:nth-of-type(1){
          width:90px;
        }
        dd:nth-of-type(2){
          display: none;
        }
        dd:nth-of-type(3){
          display: block;
        }
      }
    }
  }
  .contain_comment{
    @include rect(75%,auto);
    margin:0 auto;
    // background:red;
    .comment_form{
      position: relative;
      textarea{
        resize: none;
        width: 100%;
        height: 110px;
        min-height: 110px;
        max-height: 110px;
        padding-left: 18px;
        padding-right: 18px;
        padding-top: 12px;
        border: none;
        background-color: #f2f2f2;
      }
      span{
        position: absolute;
        right: 20px;
        top: 80px;
      }
    }
    .comment_btn{
      width:100%;
      position: relative;
      margin-bottom:50px;
      button{
        position: absolute;
        right:5px;top:0;
        width: 80px;
        height: 34px;
        padding: 0;
        border-radius: 34px;
        line-height: 32px;
        font-size: 14px;
        text-align: center;
        background: #e91e63;
        border:0;
        color:#fff;
        font-size: 14px;
      }
    }
    .comments{
      // background:yellow;
      @include rect(100%,100%);
      @include flexbox();
      @include flex-direction(column);
      margin-bottom: 50px;
      .commentItem{
        @include rect(100%,20px);
        // margin-bottom: 20px;
        p{
          line-height: 25px;
          @include rect(70%,30px);
          float: left;
        }
        span{
          @include rect(140px,20px);
          // display: inline-block;
          float: right;
        }
      }
      
    }
  }
}